<!--**
* 定义对话框元素
* @usage <api-dialog type="normal"></api-dialog>
* @author lonphy
* @version 1.0
*-->
<script>
    document.registerElement('l5-dialog', {
        prototype: Object.create(HTMLElement.prototype, {
            open: {
                value: function () {
                    this.classList.add('dialog-show');
                }
            },
            close: {
                value: function () {
                    this.classList.remove('dialog-show');
                }
            },
            type: {
                get: function () {
                    if (this.attributes['type']) {
                        return this.attributes['type'].value;
                    }
                    return "normal";
                }
            },
            createdCallback: {
                value: function () {
                    var tpls = document.getElementById('l5-dialog').import;
                    var tpl = tpls.getElementById(this.type.toLowerCase());
                    var clone = document.importNode(tpl.content, true);
                    this.createShadowRoot().appendChild(clone);
                }
            },
            attachedCallback: {
                value: function () {
                    console.log('insert');
                }
            },
            detachedCallback: {
                value: function () {
                    console.log('delete');
                }
            },
            attributeChangedCallback: {
                value: function (attrName, oldVal, newVal) {
                    console.log(attrName + ' changed from ' + oldVal + ' to ' + newVal);
                }
            }
        })
    });
</script>
<template id="normal">
<style>
@
-webkit-keyframes dialog /* Safari 和 Chrome */ { 0% {
	-webkit-transform: translateY(-600px)
}

60%
{
opacity
:
 
1;
-webkit-transform
:
 
translateY
(120px)

            
}
80%
{
opacity
:
 
1;
-webkit-transform
:
 
translateY
(94px)

            
}
94%
{
opacity
:
 
1;
-webkit-transform
:
 
translateY
(110px)

            
}
96%
{
opacity
:
 
1;
-webkit-transform
:
 
translateY
(102px)

            
}
100%
{
opacity
:
 
1;
-webkit-transform
:
 
translateY
(106px);

                
z-index
:
 
50
}
}
:host {
	position: absolute;
	border-radius: 5px;
	box-shadow: 2px 2px 16px 8px rgba(0, 0, 0, 0.2);
	width: 480px;
	height: 300px;
	background: #fff;
	left: calc(50% -   240px);
	top: 0;
	opacity: 0;
}

:host (.dialog-show:host ) {
	-webkit-animation-name: dialog;
	-webkit-animation-duration: .6s;
	-webkit-animation-delay: .2s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-fill-mode: both;
	top: 60px;
}

h4 {
	
}

.msg {
	font: 13px/1.2 normal Segoe UI, Verdana, sans-serif;
}
</style>
<h4></h4>

<div class="msg">
	<content></content>
</div>
</template>
<template id="error">
<style>
@
-webkit-keyframes dialog /* Safari 和 Chrome */ { 0% {
	-webkit-transform: translateY(-600px)
}

60%
{
opacity
:
 
1;
-webkit-transform
:
 
translateY
(120px)

            
}
80%
{
opacity
:
 
1;
-webkit-transform
:
 
translateY
(94px)

            
}
94%
{
opacity
:
 
1;
-webkit-transform
:
 
translateY
(110px)

            
}
96%
{
opacity
:
 
1;
-webkit-transform
:
 
translateY
(102px)

            
}
100%
{
opacity
:
 
1;
-webkit-transform
:
 
translateY
(106px);

                
z-index
:
 
50
}
}
:host {
	position: absolute;
	border-radius: 5px;
	box-shadow: 2px 2px 16px 8px rgba(0, 0, 0, 0.2);
	width: 480px;
	height: 300px;
	background: #fff;
	left: calc(50% -   240px);
	top: 0;
	opacity: 0;
}

:host (.dialog-show:host ) {
	-webkit-animation-name: dialog;
	-webkit-animation-duration: .6s;
	-webkit-animation-delay: .2s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-fill-mode: both;
	top: 60px;
}

h4 {
	
}

.msg {
	font: 13px/1.2 normal Segoe UI, Verdana, sans-serif;
}
</style>
<h4></h4>

<div class="msg">
	<content></content>
</div>
</template>